<template>

    <van-nav-bar title="注册豆瓣" />


    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="username" name="username" label="手机号" placeholder="手机号"
                :rules="[{ pattern: true, message: '请填写手机号' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" @click="dj" :disabled="time>0?true:false">{{time>0?time+'秒':'发送验证码'}}</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>


</template>

<script setup>
import { registerApi } from '@/api/api'
import { showFailToast, showSuccessToast } from 'vant';
import { ref } from 'vue';
let username = ref('')
let password = ref('')
const onSubmit = () => {
    registerApi(username.value, password.value).then((res) => {
        if (res.data.code == 0) {
            showSuccessToast('注册成功')
            router.push('/denglu')
        } else {
            showFailToast('注册失败')
            username = ''
            password = ''
        }
    })
}
let sms = ref('')
let time = ref(0)
const dj = () => {
    sms.value = Math.floor(Math.random() * 1000000)
    if(time.value>0)return
    time.value = 10
    const zwx = setInterval(() => {
        time.value--
        if (time.value == 0) {
            clearInterval(zwx)
        }
    }, 1000);
}
</script>

<style lang="scss" scoped></style>